<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../style.css" media="screen" />
<title>Home</title>
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<style>
html,body{height:100%}
/*div.test {
	background: blue;
	width: 50%;
	height: 50%;
	overflow: hidden;
}
div.test div.west {
	height: 150%;
	background: red;
	width: 150%;
}*/
</style>
</head>
<body>

<!--<div id="header">
  <ul  class="menu-nav">
    <li class="home"><a href="/home/"> </a></li>
    <li class="shoecafe2"><a href="/shoe-cafe/"> </a></li>
    <li class="shopping"><a href="/shopping/"> </a></li>
    <li class="category"><a href="/category/"> </a></li>
    <li class="location_shop"><a href="/location-shop/"> </a></li>
    <li class="activity"><a href="/activity/"> </a></li>
    <li class="contact_us"><a href="/home/"> </a></li>
  </ul>
  <div id="header_login">
   $header_user
  </div>
  <div id="form-login">
    <form action="/profile/login/" class="flogin" id="flogin" method="post">
      <h3>Login</h3>
      <ul>
        <li>
          <label>E-mail Address *</label>
          <input type="text" name="email" id="log_email" value="" />
        </li>
        <li>
          <label>Password *</label>
          <input type="password" name="password" id="log_password" value="" />
        </li>
         <li class="submit">
          <input type="submit" class="submit"  value="submit" />
        </li>
        <li class="links">
        	<a href="#">Forget your password *</a>
        	<a href="#">Don't have an account yet *</a>
        </li>
      </ul>
    </form>
    <p class="close"><a href="#">close</a></p>
  </div>
  
</div>-->

<style>
div#wrapper {
	height: 80%;
	margin: 0 auto;
	overflow: hidden;
	width: 96%;
}
div#wrapper div.shadow-l {
	background: url(../../images/bg/bg-left.png) repeat-y 0 0;
	height: 100%;
	width: 200px;
		position: absolute;
		left: 0;
		top: 0;
}
div#wrapper div.shadow-r {
	background: url(../../images/bg/bg-right.png) repeat-y 0 0;
	height: 100%;
	width: 200px;
		position: absolute;
		right: 0;
		top: 0;
}
div.home-images {
	height: 100%;
	overflow: hidden;
	width: 100%;
}
div.img-left {
	background: blue;
	float: left;
	height: 100%;
	overflow: hidden;
	width: 24%;
}
div.img-left img {
	width: 100%;
}
div.img-right {
	float: right;
	height: 100%;
	width: 76%;
}
div.img-right div.img {
	background: green;
	float: left;
	text-align: center;
	overflow: hidden;
}
div.img1 {
	height: 59%;
	width: 32%;
}
div.img2 {
	height: 59%;
	width: 36%;
}
div.img3 {
	height: 59%;
	width: 32%;
}
div.img4 {
	height: 41%;
	width: 40%;
}
div.img5 {
	height: 41%;
	width: 25%;
}
div.img6 {
	height: 41%;
	width: 35%;
}
div.img-right img {
	width: 100%;
}
div#wrapper-head {
	background: #000;
	height: 6%;
	padding: 0.625em 0 0 0;
	width: 100%;
}
div.head-l {
	background: url(../../images/bg/bg-head-l-repeat.jpg) repeat-x 0 0;
	float: left;
	height: 29px;
	width: 30%;
}
div.head-r {
	border-bottom: solid 1px #FF0000;
	float: left;
	border-top: solid 1px #FF0000;
	height: 27px;
	width: 70%;
}
div.head-l h1 {
	background: url(../../images/bg/bg-head-l.jpg) no-repeat 0 0;
	display: block;
	float: right;
	height: 29px;
	text-indent: -9999px;
	width: 211px;
}
div#wrapper-footer {
	background: url(../../images/bg/bg-footer-l-repeat.jpg) repeat-x 0 5px #000;
	height: 10%;
	padding: 0.313em 0 0 0;
	width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
}
div.footer-l {
}
div.footer {
	background: url(../../images/bg/bg-footer-r.jpg) no-repeat right 0;
	height: 40px;
	width: 100%;
}
div.footer a {
	display: block;
	float: right;
	margin: 5px 5px 0 0;
}
div.footer a.fb {
	background: url(../../images/icon/icon-social.png) no-repeat 0 0;
	height: 29px;
	text-indent: 9999px;
	width: 18px;
}
div.footer a.tw {
	background: url(../../images/icon/icon-social.png) no-repeat right 0;
	height: 29px;
	margin: 5px 50px 0 0;
	text-indent: 9999px;
	width: 38px;
}
p.copyrights {
	float: left;
}
</style>

<div id="wrapper-head">
	<div class="head-l">
    	<h1>Shoe Cafe</h1>
    </div>
    <div class="head-r">
    </div>
</div>
<div id="wrapper">
	<div class="shadow-l"></div>
    <div class="shadow-r"></div>
	<div class="home-images">
        <div class="img-left"><img src="../../images/test/shoecafe.jpg" /></div>
        <div class="img-right">
          <div class="img img1"><img src="../../images/test/image-01.jpg" /></div>
          <div class="img img2"><img src="../../images/test/image-02.jpg" /></div>
          <div class="img img3"><img src="../../images/test/image-03.jpg" /></div>
          <div class="img img4"><img src="../../images/test/image-04.jpg" /></div>
          <div class="img img5"><img src="../../images/test/image-05.jpg" /></div>
          <div class="img img6"><img src="../../images/test/image-06.jpg" /></div>
        </div>
	</div>
</div>
<div id="wrapper-footer">
	<div class="footer">
		<p class="copyrights">Copyrights</p>
    	<a href="#" class="tw">Twitter</a>
    	<a href="#" class="fb">Facebook</a>
    </div>
</div>

<!--<div id="footer">
  <div class="copyright"> Copyright © 2011 Shoe cafe' Inc. All rights reserved. </div>
  <div class="right"> <a class="facebook" href="#">facebook</a> <a  class="twitter" href="#">twitter</a> </div>
</div>-->
</body>
</html>
